<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <div class="single_item">
            <el-button @click="renderStart">渲染</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {onMounted, ref} from "vue";
import { addWallGeojson,addDynamicLine, addShadow } from "../common/wallEntity"
import gisTool from "../common/GisTools"
import xzqData from "../../../assets/data/xzq.json";
import AceEditor from "@/components/aceEditor.vue";


const htmlStr = ref(`
  <template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <div class="single_item">
            <el-button @click="renderStart">渲染</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {onMounted, ref} from "vue";
import { addWallGeojson,addDynamicLine, addShadow } from "../common/wallEntity"
import gisTool from "../common/GisTools"
import xzqData from "../../../assets/data/xzq.json";


const renderStart = (type: string) => {

  let points=xzqData.features[0]['geometry']['coordinates'];
  addShadow(cViewer.value,points.flat(3))
  // // 添加动态边界
  addDynamicLine(cViewer.value,points.flat(3))
  // // 添加动态立体墙
  addWallGeojson(cViewer.value,{
    points: points.flat(3),
    maximumHeights: 1200,
    minimumHeights: 0
  })
}

const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  gisTool.cameraFlyToPoint(cViewer.value,[106.482788,38.316821],1200)
})
<\/script>

<style lang="scss" scoped>
#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;

  .single_item {
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
  }

  .single_item_title {
    margin: 10px;
    color: #ffffff;
  }
}
</style>

`);

const tsStr = ref(`
 import * as Cesium from "cesium";
import {getAssetsFile } from "../../../utils/utils"
/**
 * 添加动态线
 * @param pointList [jd,wd,jd,wd]   flat(3)
 * @param splitNum
 */
const addDynamicLine=(viewer:any,pointList: Array<any>)=> {
    //添加一个基础的底线
    viewer.entities.add({
        polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray(pointList),
            width: 150,
            material: new Cesium.PolylineGlowMaterialProperty({
                glowPower: 0.005,
                taperPower: 1,
                color: Cesium.Color.fromCssColorString('#0abeff')
            }),
            clampToGround: true,
        },
    });
    //一个线的高亮动画，垂直方向，蓝色的线从无到有显示
    viewer.scene.groundPrimitives.add(
        new Cesium.GroundPolylinePrimitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: new Cesium.GroundPolylineGeometry({
                    positions: Cesium.Cartesian3.fromDegreesArray(pointList),
                    width: 5.0,
                }),
            }),
            // appearance : new Cesium.PolylineColorAppearance()
            appearance: new Cesium.PolylineMaterialAppearance({
                material: new Cesium.Material({
                    fabric: {
                        type: 'DynamicColor',
                        uniforms: {
                            u_image: getAssetsFile('materialImg/GradientRed.png'),
                            u_color: Cesium.Color.fromCssColorString('#0abeff'),
                            u_speed: 2,
                        },
                        source: \`
              czm_material czm_getMaterial(czm_materialInput materialInput) {
                  czm_material material = czm_getDefaultMaterial(materialInput);
                  vec2 st = materialInput.st * 2.;
                  vec4 colorImage = texture(u_image, vec2((1. - fract(st.s - u_speed * czm_frameNumber * 0.005)), st.t));
                  vec4 fragColor;
                  fragColor.rgb = u_color.rgb / 1.0;
                  fragColor = czm_gammaCorrect(fragColor); // 伽马校正
                  material.alpha = colorImage.a * u_color.a;
                  material.diffuse = u_color.rgb;
                  material.emission = fragColor.rgb;
                  return material;
              }
          \`,
                    },
                }),
            }),
        })
    )
}
/**
 * 添加动态墙体
 * @param wallList   [jd,wd,jd,wd]  flat(3)
 * @param maximumHeights 最大高度
 * @param minimumHeights 最小高度
 */
const addWallGeojson=( viewer:any, {
        points=[],
        color='#3a5e88',
        alpha=0.8,
        maximumHeights=800,
        minimumHeights=0,
    }
)=> {
    let wallList=[Cesium.Cartesian3.fromDegreesArray(points)];
    const geometryInstances = wallList.map((positions) => {
        positions.push(positions[0])
        return new Cesium.GeometryInstance({
            geometry: new Cesium.WallGeometry({
                positions: positions,
                maximumHeights: positions.map(() => maximumHeights),
                minimumHeights: positions.map(() => minimumHeights),
                vertexFormat: Cesium.MaterialAppearance.VERTEX_FORMAT,
            }),
        })
    })
    const wallPrimitive = new Cesium.Primitive({
        geometryInstances,
        appearance: new Cesium.MaterialAppearance({
            material: new Cesium.Material({
                fabric: {
                    type: 'DynamicWall',
                    uniforms: {
                        image: getAssetsFile('materialImg/GradientRed.png'),
                        color: Cesium.Color.fromCssColorString(color || '#3a5e88'),
                        speed: 2,
                        alpha:alpha || 0.8
                    },
                    source: \`
              czm_material czm_getMaterial(czm_materialInput materialInput) {
                  czm_material material = czm_getDefaultMaterial(materialInput);
                  vec2 st = materialInput.st;
                  vec4 colorImage = texture(image, vec2((1. - fract(st.t - speed * czm_frameNumber * 0.005)), st.t));
                  vec4 fragColor;
                  fragColor.rgb = color.rgb / 1.0;
                  fragColor = czm_gammaCorrect(fragColor); // 伽马校正
                  material.alpha = colorImage.a * color.a  * alpha;
                  material.diffuse = color.rgb;
                  material.emission = fragColor.rgb;
                  return material;
              }
          \`,
                }
            }),
        }),
    })
    wallPrimitive.name = 'wall'
    viewer.scene.primitives.add(wallPrimitive)
}

/**
 * 添加遮罩区域，-这种适用于固定区域，固定行政区的,不需要看到全部的地图遮罩
 * @param viewer
 * @param points
 */
const addShadow=(viewer:any,points:Array<any>)=>{
    // 挖洞1-反选区域
    const entity = new Cesium.Entity({
        id: '2',
        polygon: {
            hierarchy: {
                // 绘制的区域太大容易卡顿
                positions: Cesium.Cartesian3.fromDegreesArray([70, 0, 70, 90, 140, 90, 140, 0]),
                holes: [
                    {
                        positions: Cesium.Cartesian3.fromDegreesArray(points),
                    },
                ]
            },
            material: Cesium.Color.fromCssColorString('#000000').withAlpha(0.4),
            zIndex: 2
        },
    })
    viewer.entities.add(entity)
}

export {
    addDynamicLine,
    addWallGeojson,
    addShadow
}

`);

const renderStart = (type: string) => {

  let points=xzqData.features[0]['geometry']['coordinates'];
  addShadow(cViewer.value,points.flat(3))
  // // 添加动态边界
  addDynamicLine(cViewer.value,points.flat(3))
  // // 添加动态立体墙
  addWallGeojson(cViewer.value,{
    points: points.flat(3),
    maximumHeights: 1200,
    minimumHeights: 0
  })
}

const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  gisTool.cameraFlyToPoint(cViewer.value,[106.482788,38.316821],1200)
})
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;

  .single_item {
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
  }

  .single_item_title {
    margin: 10px;
    color: #ffffff;
  }
}
</style>
